<template>
  <el-main>
    <div class="teacher">
      <div class="app-table">
        <div class="app-body">
          <div class="header">
            <div class="navBox">
              <div class="nav" :class="{ 'nav_active': active == 0 }" @click="active = 0">全部留言 <span
                  :class="{ 'pcolor1': active == 0 }">10</span></div>
              <div class="xian" v-if="active != 0 && active != 1"></div>
              <div class="nav" :class="{ 'nav_active': active == 1 }" @click="active = 1">未回复 <span
                  :class="{ 'pcolor1': active == 1 }">56</span></div>
              <div class="xian" v-if="active != 2 && active != 1"></div>
              <div class="nav" :class="{ 'nav_active': active == 2 }" @click="active = 2">已回复 <span
                  :class="{ 'pcolor1': active == 2 }">99+</span></div>
            </div>
            <div style="margin-right: 30px;">
              <el-config-provider :locale="locale">
                <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
                  :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                  @current-change="changeCurrentPage" />
              </el-config-provider>
            </div>
          </div>
          <div class="searchBox">
            <div class="search">
              <input type="text" class="inputText" placeholder="输入姓名搜索">
              <button @click="getMessageList">搜索</button>
            </div>
          </div>
          <div>
            <div class="table_header flex">
              <div class="dateBox">日期<el-icon :size="14" color="#C5C6C8">
                  <DCaret />
                </el-icon></div>
              <div class="messageBox">留言</div>
            </div>
            <div class="table_main">
              <div class="table_left">
                <div class="tr" v-for="item in list" :key="item.id">
                  <div class="td first">{{ item.createdAt }}</div>
                  <div class="td twoBox" @click="clickHandle(item)">
                    <div class="nameBox flex" style="padding: 15px 0 10px 0;">
                      <img src="../../assets/ChargeTaskLabel_icon5.png">
                      <div class="name">{{ item.userName ? item.userName.split("_")[0] : item.nickName ?
                item.nickName : "匿名用户" }}</div>
                      <div class="department">({{ item.userName == '匿名用户' ? "未知" : item.departmentName ?
                item.departmentName : "未知" }})</div>
                      <div class="time">
                        <p class="pStatus2" v-if="item.repliesPageInfo.total == 0">未回复</p>
                        <p class="pStatus1" v-if="item.repliesPageInfo.total > 0">已回复</p>
                      </div>
                    </div>
                    <div class="contentBox">{{ item.content }}</div>
                  </div>
                </div>
              </div>

              <div class="table_right">
                <div class="centerBox" v-if="JSON.stringify(selectData) == '{}'">
                  <img src="../../assets/message_nodata.png" alt="">
                  <p>书记校长留言信箱系统</p>
                </div>
                <div class="right_main" v-else>
                  <div class="right_li" style="border-bottom: 1px solid #F2F2F2;">
                    <div class="nameBox flex">
                      <img src="../../assets/ChargeTaskLabel_icon5.png">
                      <div class="name">{{ selectData.userName ? selectData.userName.split("_")[0] : selectData.nickName
                ? selectData.nickName : "匿名用户" }}</div>
                      <div class="department">({{ selectData.userName == '匿名用户' ? "未知" : selectData.departmentName ?
                selectData.departmentName : "未知" }})</div>
                      <div class="time">{{ selectData.createdAt }}</div>
                    </div>
                    <div class="reply">{{ selectData.content }}</div>
                  </div>

                  <div class="right_li" v-for="item in  selectData.repliesPageInfo.list" :key="item.id">
                    <div :class="{
                'nameBox1': selectData.departmentName != item.departmentName,
                'nameBox': selectData.departmentName == item.departmentName
              }" class="flex">
                      <img src="../../assets/ChargeTaskLabel_icon5.png">
                      <div class="name">{{ selectData.departmentName ==
                item.departmentName ? selectData.userName.split("_")[0] : item.replyName.split("_")[0] }}
                      </div>
                      <div class="department">({{ selectData.userName == '匿名用户' ? "未知" : item.departmentName }})</div>
                      <div class="time">{{ item.createdAt.slice(0, 10) + " " + item.createdAt.slice(12, 19) }}</div>
                    </div>
                    <div class="reply" :class="{
                'reply1': selectData.departmentName != item.departmentName,
                'reply': selectData.departmentName == item.departmentName
              }">{{ item.content }}</div>
                  </div>

                  <div class="publish">
                    <div class="imgBtn flex">
                      <img src="../../assets/images/reviewStatisticsIcon1.png" alt="">
                      <p>上传图片</p>
                    </div>

                    <textarea class="replyText" placeholder=""></textarea>
                    <button class="reply_btn">回复</button>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import bottomView from "@/components/bottom.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";
import { Picture as IconPicture, DCaret } from "@element-plus/icons-vue";
import { getCurrentInstance } from "vue";
import { decrypt } from "@/utils/dateFormat";


export default {
  name: "BaseTeacherList",

  data() {
    return {
      type: 0,
      title: "",
      page: 0,
      pageSize: 5,
      total: 100,
      limit: 10,
      list: [],
      flagId: '',
      schoolNames: [],
      active: 0,
      form: {
        name: "",
        teacherNumber: "",
        time: "",
      },
      selectData: {},
      mobileNumber: '',
    };
  },
  components: {
    IconPicture,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
    bottomView, DCaret,
  },
  watch: {
    '$route.query.type'(newVal) {
      alert(newVal)
      console.log(newVal);
      // this.type = newVal;
      // 根据需要执行其他操作，比如更新视图或发起请求  
    }
  },
  setup() {
    return {
      locale: zhCn,
    }
  },
  mounted() {
    this.getMessageList();
  },
  watch: {
  },
  methods: {
    searchEnter: function (e) {
      console.log(e);
      // 使用 which 和 keyCode 属性来解决兼容问题
      var keyCode = window.event ? e.keyCode : e.which;
      var val = e.target.value;
      if (keyCode == 13 && val) {
        this.getMessageList();
      }
    },
    add() {
      this.$refs.addBaseTeacherView.title = "添加"
    },
    editApp(obj) {
      this.$refs.editBaseTeacherView.title = "修改信息"
    },

    deleteApp(id) {
      ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpService("/javaApi/baseMessages/deleteById", "id=" + id, "post").then(
            (data) => {
              if (data.code == 200) {
                ElMessage.success("删除成功");
                this.getMessageList();
              } else {
                ElMessage.error(data.message);
              }
            }
          );
        })
        .catch(() => { });
    },


    onSubmit() {
      this.getMessageList();
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.limit = size;

      this.getMessageList();
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getMessageList();
    },
    clickHandle(data) {
      this.selectData = data
    },
    getMessageList() {
      httpService(
        "/javaApi/baseMessages/myList/" + this.page + "/" + this.pageSize,
        {
          userName: this.form.name,
          // createdAt: this.form.time ? this.form.time : ''
        },
        "get"
      ).then((res) => {
        const data = res.object
        if (data.list) {
          data.list.map(item => item.createdAt = formatTime1(item.createdAt))
        }
        this.list = data.list;
        this.total = data.total;
        this.pageCount = data.pages;

        this.selectData = this.list[0]
      });
    },

  },
};
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
}

.el-main {
  padding: 0px;
  text-align: left
}


.app-table {
  background: #eff3f5;
  padding: 5px 10px 10px;
}

.app-separator {
  padding-left: 10px;
}

.app-body {
  background: white;
  min-height: calc(100vh - 115px);
}



.el-pagination {
  text-align: center;
  margin-top: 10px;
}


.header {
  padding: 10px 0 5px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navBox {
  width: 350px;
  height: 34px;
  background-color: #ECEEF0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 5px 3px;
  margin-left: 15px;
  cursor: pointer;


}

.nav {
  width: calc((100% - 2px) / 3);
  font-size: 16px;
  color: #515B66;
  text-align: center;
  transition: all 0.2s ease-in;

}

.nav span {
  color: #9FA1A3;
}

.nav_active {
  background-color: #fff;
  line-height: 38px;
  border-radius: 5px;
  transition: all 0.2s ease-in;
}

.pcolor1 {
  color: #007FFF !important;
}

.xian {
  background-color: #A5A8AB;
  height: 15px;
  width: 1px;
}

.searchBox {
  width: 100%;
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 10px;
  margin-top: 5px;
}

.search {
  width: 290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inputText {
  height: 40px;
  border: 1px solid #D5D8E3 !important;
  outline: none;
  box-sizing: border-box;
  margin-left: 20px;
  border-right-color: none !important;
  padding-left: 15px;
  flex: 1;
}

.inputText::placeholder {
  color: #9099A3;
  font-size: 16px;
}

.searchBox button {
  width: 62px;
  height: 40px;
  border: none;
  background-color: #007FFF;
  border-radius: 3px;
  color: #fff;
  margin-left: -1px;
}

.table_header {
  height: 52px;
  color: #515B66;
  font-size: 16px;
  border-bottom: 1px solid #D5D8E3;
}

.dateBox {
  width: 180px;
  text-align: center;
}

.dateBox .el-icon {
  margin-left: 5px;
}

.messageBox {
  padding-left: 50px;
}


.table_main {
  height: 100%;
  display: flex;
  align-items: center;

}

.table_left {
  width: 50%;
  height: calc(100vh - 284px);
  overflow-y: auto !important;
}

.table_left::-webkit-scrollbar {
  width: 0;
}

.tr {
  display: grid;
  grid-template-columns: 180px auto;
}

.tr:not(:last-child) {
  border-bottom: 1px solid #E5E5E5;
}

.tr:last-child {
  border-bottom: 1px solid #E5E5E5;
}

.td {
  min-height: 50px;
}

.first {
  width: 180px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.twoBox {
  padding-left: 30px;
  border-left: 1px solid #E5E5E5 !important;
}

.table_right {
  border-left: 1px solid #E5E5E5;
  width: 50%;
  height: calc(100vh - 284px);
  overflow-y: auto !important;
}

.centerBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 16px;
}

.nameBox {
  padding: 20px 40px 20px 30px;
  /* flex-direction: row-reverse; */
}

.nameBox1 {
  padding: 20px 40px 20px 30px;
  flex-direction: row-reverse;
}

.nameBox img,
.nameBox1 img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
}

.nameBox .name,
.nameBox1 .name {
  color: #000;
  font-size: 16px;
  margin: 0 10px 0 15px;
}

.department {
  color: #515B66;
  font-size: 14px;
}

.time {
  color: #515B66;
  font-size: 14px;
  margin-left: 20px;
}

.reply {
  color: #000;
  font-size: 15px;
  margin: 0 40px 20px 30px;
  line-height: 24px;
}

.reply1 {
  color: #000;
  font-size: 15px;
  margin: 0 40px 20px 30px;
  line-height: 24px;
  text-align: right;
}

.contentBox {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 22px;
  color: #515B66;
}

.pStatus1 {
  background-color: #DDEEFF;
  width: 55px;
  line-height: 25px;
  border-radius: 3px;
  color: #007FFF;
  font-size: 13px;
  text-align: center;
}

.pStatus2 {
  background-color: #FFDDDD;
  width: 55px;
  line-height: 25px;
  border-radius: 3px;
  color: #FF0000;
  font-size: 13px;
  text-align: center;
}

.publish {
  position: fixed;
  right: 2.5%;
  bottom: 30px;
  width: 40%;
  height: 64px;
  border: 2px solid #E5E5E5;
  border-radius: 12px;
  box-shadow:
    0 0 10px rgba(229, 229, 229, 0.5),
    0 0 10px rgba(229, 229, 229, 0.5),
    0 0 10px rgba(229, 229, 229, 0.5),
    0 0 10px rgba(229, 229, 229, 0.5);
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.imgBtn {
  justify-content: center;
  position: absolute;
  top: -50px;
  left: 0;
  width: 110px;
  height: 37px;
  border-radius: 10px;
  font-size: 14px;
  color: #000000;
  box-shadow: 0 0 0 0.75px #C8CBCE;
}

.imgBtn img {
  width: 23px;
  height: 17px;
  margin-right: 5px;
}

.replyText {
  flex: 1;
  height: calc(100% - 8px);
  outline: none;
  border: none;
  resize: none;
}

.reply_btn {
  width: 98px;
  height: 40px;
  background-color: #007EFF;
  color: #FFF;
  font-size: 14px;
  border: none;
  outline: none;
  border-radius: 8px;
  margin: 0 12px;
}
</style>
